<template>
  <div class="order">
    <van-nav-bar title="我的订单" left-arrow @click-left="$router.go(-1)" />
    <van-tabs v-model="activeName">
      <van-tab title="全部" name="a">内容 1</van-tab>
      <van-tab title="待支付" name="b">内容 2</van-tab>
      <van-tab title="进行中" name="c">内容 3</van-tab>
      <van-tab title="已完成" name="d">内容 2</van-tab>
      <van-tab title="已取消" name="e">内容 3</van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Vue from "vue";
import { Tab, Tabs } from "vant";

Vue.use(Tab);
Vue.use(Tabs);
export default {
  data() {
    return {
      activeName: "a",
    };
  },
};
</script>

<style>
.order {
  background: #f4f4f4;
}
.van-icon-arrow-left:before {
  color: black;
  font-size: 20px;
  font-weight: bold;
}
.van-nav-bar__title {
  font-size: 17px;
}
.van-tab__text--ellipsis:hover {
  color: #f5b43e;
}
</style>